import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_module/entities/CourseItemEn.dart';
import 'package:flutter_module/global/colors.dart';
import 'package:flutter_screenutil/screen_util.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //appBar: AppBar(
        //  backgroundColor: Colors.black26,
        //  title: Text('container'),
        //),
        body:VideoTab (),
      ),
    );
  }
}
class VideoTab extends StatefulWidget {
  VideoTab({Key key}) : super(key: key);

  @override
  _VideoTabState createState() {
    return _VideoTabState();
  }
}

class _VideoTabState extends State<VideoTab> {
  List<CourseItemEn>_techniqueData = [];
  @override
  void initState() {
    CourseItemEn _courseItemEn = new CourseItemEn(1,
        'https://img1.baidu.com/it/u=3396838262,522903359&fm=26&fmt=auto&gp=0.jpg',
        "11",
        1,
        "300","","");
    _techniqueData.add(_courseItemEn);
    _techniqueData.add(_courseItemEn);
    _techniqueData.add(_courseItemEn);
    _techniqueData.add(_courseItemEn);
    super.initState();
    _loadData();
  }
  bool _display=false;
  void _loadData() async {
    EasyLoading.show(
      status: "Loading...",
      //duration: Duration(seconds: 2)
      //maskType: EasyLoadingMaskType.black,
    );
    await Future.delayed(Duration(milliseconds: 1000), () async {
      EasyLoading.dismiss();
      setState(() {
        _display=true;
      });
    });

  }
  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    ScreenUtil.init(
      BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width,
        maxHeight: MediaQuery.of(context).size.height
      ),
      designSize: Size(1080,2340 ),
    );
    if(_display==true) {
      return SafeArea(
        child: Container(
          color: Color(0xff000B1F),
          child:Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Row(
                    children: [
                      Text(
                        '全部作品',
                        style:TextStyle(
                          fontSize: ScreenUtil().setSp(45),
                          color:Colors.white,
                        ),
                      ),
                      Icon(Icons.arrow_drop_down_rounded,color: AppColors.primary,size: 30,)
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        '音乐',
                        style:TextStyle(
                          fontSize: ScreenUtil().setSp(45),
                          color:Colors.white,
                        ),
                      ),
                      Icon(Icons.arrow_drop_down_rounded,color: AppColors.primary,size: 30,)
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        '价格',
                        style:TextStyle(
                          fontSize: ScreenUtil().setSp(45),
                          color:Colors.white,
                        ),
                      ),
                      Icon(Icons.arrow_drop_down_rounded,color: AppColors.primary,size: 30,)
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        '智能排序',
                        style:TextStyle(
                          fontSize: ScreenUtil().setSp(45),
                          color:Colors.white,
                        ),
                      ),
                      Icon(Icons.arrow_drop_down_rounded,color: AppColors.primary,size: 30,)
                    ],
                  ),
                ],
              ),
              Expanded(child: Container(
                padding: EdgeInsets.all(10),
                child: Wrap(
                  runSpacing: 10,
                  spacing: 10,
                  children: _techniqueData
                      .asMap()
                      .keys
                      .map((index) => _courseItemWidget(_techniqueData[index]))
                      .toList(),
                ),
              ),)
            ],
          ),
        ),
      );
    }else{
      return Container(
        width: 0,
        height: 0,
        color: AppColors.background,
      );
    }
  }
  Widget _courseItemWidget(CourseItemEn courseItemEn) {

    var itemWidth = (ScreenUtil().screenWidth - 30) / 2;

    return InkWell(
      onTap: () {
        Navigator.pushNamed(context, 'courseDetail', arguments: [

        ]);
      },
      child: Container(
        width: itemWidth, //实现在wrap中平铺,高度自适应
        decoration: BoxDecoration(
          color: Color(0xff182643),
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: Offset(-1, 1.0),
              blurRadius: 1.0,
              spreadRadius: 0.6,
            ),
          ],
          borderRadius: BorderRadius.all(Radius.circular(8)),
        ),
        child: Column(
          children: <Widget>[
            Container(
              width: double.infinity,
              child: AspectRatio(
                aspectRatio: 1 / 1, //防止服务器返回的图片高度不一致
                child: ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8),
                    topRight: Radius.circular(8),
                  ),
                  child: Image.network(
                    courseItemEn.cover,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: ScreenUtil().setHeight(20),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                margin: EdgeInsets.fromLTRB(
                  ScreenUtil().setWidth(20),
                  ScreenUtil().setHeight(0),
                  ScreenUtil().setWidth(0),
                  ScreenUtil().setHeight(0),
                ),
                child: Text(
                  courseItemEn.name,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                margin: EdgeInsets.fromLTRB(
                  ScreenUtil().setWidth(20),
                  ScreenUtil().setHeight(0),
                  ScreenUtil().setWidth(0),
                  ScreenUtil().setHeight(0),
                ),
                child: Text(
                  '￥${courseItemEn.price}',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                  top: ScreenUtil().setHeight(20),
                  bottom: ScreenUtil().setHeight(20)
              ),
              child: Row(
                children: <Widget>[
                  Align(
                      alignment: Alignment.centerLeft,
                      child: Row(
                        children: [
                          SizedBox(width: ScreenUtil().setWidth(20),),
                          ClipOval(
                            child: Image.network(
                                "https://img2.baidu.com/it/u=172917783,2425047487&fm=26&fmt=auto",
                                width: ScreenUtil().setWidth(60),
                                height: ScreenUtil().setWidth(60),
                                fit: BoxFit.cover),
                          ),
                          Text(
                            '二号',
                            style:TextStyle(
                              fontSize: 13,
                              color:Colors.white,
                            ),
                          )
                        ],
                      )
                  ),
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Icon(
                          Icons.group_sharp,
                          size: ScreenUtil().setSp(45),
                          color: Colors.black54,
                        ),
                        SizedBox(width: ScreenUtil().setWidth(30),),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

  }
}